﻿@page "/ComboBox/Multi-Column"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the Multicolumn ComboBox. Click/focus and type the character in the ComboBox to select an item from the multicolumn data.</p>
</SampleDescription>
<ActionDescription>
   <p>The ComboBox has an option to display the data in a multicolumn layout using the following templates.</p>
   <p><ul><li><a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxTemplates-1.html#Syncfusion_Blazor_DropDowns_ComboBoxTemplates_1_HeaderTemplate' target='_blank'> HeaderTemplate</a> - Displays the column names in the grid layout header.</li>
          <li><a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxTemplates-1.html#Syncfusion_Blazor_DropDowns_ComboBoxTemplates_1_ItemTemplate' target='_blank'> ItemTemplate</a> - Binds the data value by row wise.</li>
   </ul></p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <SfComboBox TValue="string" TItem="EmployeeData" Placeholder="Select an employee" CssClass="e-multi-column" AllowFiltering="true" DataSource="@Data" PopupHeight="300px">
            <ComboBoxTemplates TItem="EmployeeData" >
                <HeaderTemplate>
                    <table><tr><th class="e-text-center combo-width">Emp ID</th><th>First Name</th><th>Designation</th></tr></table>
                </HeaderTemplate>
                <ItemTemplate>
                    <table><tbody><tr><td class="e-text-center combo-width">@((context as EmployeeData).EmployeeID)</td><td>@((context as EmployeeData).FirstName)</td><td>@((context as EmployeeData).Designation)</td></tr> </tbody></table>
                </ItemTemplate>
            </ComboBoxTemplates>
            <ComboBoxFieldSettings Text="FirstName" Value="EmployeeID"></ComboBoxFieldSettings>
        </SfComboBox>
    </div>
</div>

<style>
    .control_wrapper {
        margin: 0 auto;
        width: 400px;
        margin-top: 40px;
    }

    @@media (max-width: 900px) {
        .control-wrapper {
            width: 300px;
        }
    }

    .combo-width {
        width: 75px;
    }
</style>

@code{

    Type models = typeof(EmployeeData);
    public class EmployeeData
    {
        public string FirstName { get; set; }
        public string EmployeeID { get; set; }
        public string Designation { get; set; }
        public string Country { get; set; }
    }
    List<EmployeeData> Data = new List<EmployeeData>
{
        new EmployeeData() { FirstName = "Andrew Fuller", EmployeeID = "1", Designation = "Team Lead", Country = "England"  },
        new EmployeeData() { FirstName = "Anne Dodsworth", EmployeeID = "2", Designation = "Developer", Country = "USA" },
        new EmployeeData() { FirstName = "Janet Leverling", EmployeeID = "3", Designation = "HR", Country = "USA" },
        new EmployeeData() { FirstName = "Laura Callahan", EmployeeID = "4", Designation = "Product Manager", Country = "USA" },
        new EmployeeData() { FirstName = "Margaret Peacock", EmployeeID = "5", Designation = "Developer", Country = "USA" },
        new EmployeeData() { FirstName = "Michael Suyama", EmployeeID = "6", Designation = "Team Lead", Country = "USA"  },
        new EmployeeData() { FirstName = "Nancy Davolio", EmployeeID = "7", Designation = "Product Manager", Country = "USA" },
        new EmployeeData() { FirstName = "Robert King", EmployeeID = "8", Designation = "Developer ", Country = "England"  },
        new EmployeeData() { FirstName = "Steven Buchanan", EmployeeID = "9", Designation = "CEO", Country = "England" },
    };
}


